<template>
  <div class="tw-libtable"
    :class="{xnoxborder: noXborder, [`x${_uid}`]: true, xnowrap:noWrap}">
    <div class="xpadding">
    <el-table
      v-if="tableData"
      :data="tableData"
      border
      :max-height="maxHeight"
      style="width: 100%;"
      @sort-change="sortChange">
      <el-table-column
        v-for="(lv1Column, lv1Idx) in columns"
        :key="lv1Idx"
        :label="lv1Column.label"
        :prop="lv1Column.prop"
        :fixed="lv1Column.fixed"
        :width="lv1Column.width"
        :sortable="lv1Column.sortable">

        <template v-if="lv1Column.children && lv1Column.children.length>0">
          <el-table-column
            v-for="(lv2Column, lv2Idx) in lv1Column.children"
            :key="lv2Idx"
            :label="lv2Column.label"
            :prop="lv2Column.prop"
            :sortable="lv2Column.sortable">
            <template v-if="lv2Column.children && lv2Column.children.length>0">
              <el-table-column
                v-for="(lv3Column, lv3Idx) in lv2Column.children"
                :key="lv3Idx"
                :label="lv3Column.label"
                :prop="lv3Column.prop"
                :sortable="lv3Column.sortable">
                <template slot-scope="scope">
                  <span>{{ scope.row[lv3Column.prop] }}</span>
                </template>
              </el-table-column>
            </template>

            <template slot-scope="scope">
              <span :style="{color: colors[lv1Idx]}" v-if="custColors">{{ scope.row[lv2Column.prop] }}</span>
              <span v-else>{{ scope.row[lv2Column.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <template slot-scope="scope">
          <span :style="{color: colors[lv1Idx]}" v-if="custColors">{{ scope.row[lv1Column.prop] }}</span>
          <span v-else>{{ scope.row[lv1Column.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="detailUrl"
        fixed="right"
        label="操作"
        :align='position'
        :width="extent">
        <template slot-scope="scope">
          <a :href="detailUrl+'?'+$ui.qs.stringify(scope.row)">
            <span>详情</span>
          </a>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'table',

  props,

  computed: {
    tableData () {
      if (this.data.length > 0) {
        if (Array.isArray(this.data[0])) {
          const result = []
          const props = []
          this.flatPropsFromData(this.columns, props)

          this.data.forEach(row => {
            const rowObj = {}

            row.forEach((item, idx) => {
              rowObj[props[idx]] = item
            })

            result.push(rowObj)
          })

          return result
        } else {
          return this.data
        }
      } else {
        return []
      }
    },

    style () {
      return {
        fontSize: this.fontSize,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        cellPaddingY: this.cellPaddingY,
        cellPaddingX: this.cellPaddingX,
        headBg: this.headBg,
        headColor: this.headColor,
        headFontSize: this.headFontSize,
        extent: this.extent,
        position: this.position
      }
    }
  },

  methods: {
    flatPropsFromData (source, result) {
      for (const item of source) {
        if (item.children && item.children.length > 0) {
          this.flatPropsFromData(item.children, result)
        } else {
          result.push(item.prop)
        }
      }
    },

    setStyle () {
      let style = `
        ::root.tw-libtable .el-table {
          font-size: ${this.fontSize};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table thead,
        ::root.tw-libtable .el-table thead th {
          font-size: ${this.headFontSize};
          color: ${this.headColor};
          background-color: ${this.headBg};
        }

        ::root.tw-libtable .el-table td,
        ::root.tw-libtable .el-table th.is-leaf {
          border-bottom-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table td,
        ::root.tw-libtable .el-table th {
          padding: ${this.cellPaddingY} 0;
        }

        ::root.tw-libtable .el-table--border,
        ::root.tw-libtable .el-table--group {
          border-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table--border::after,
        ::root.tw-libtable .el-table--group::after,
        ::root.tw-libtable .el-table::before {
          background-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table--border td,
        ::root.tw-libtable .el-table--border th,
        ::root.tw-libtable .el-table__body-wrapper
        ::root.tw-libtable .el-table--border.is-scrolling-left~.el-table__fixed {
          border-right-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table--border th,
        ::root.tw-libtable .el-table__fixed-right-patch {
          border-bottom-color: ${this.borderColor};
        }

        ::root.tw-libtable .el-table .cell,
        ::root.tw-libtable .el-table--border td:first-child .cell,
        ::root.tw-libtable .el-table--border th:first-child .cell {
          padding-left: ${this.cellPaddingX};
        }

        ::root.tw-libtable  .el-table th>.cell {
          padding: 0 ${this.cellPaddingX};
        }

        ::root.tw-libtable .el-table .cell {
          padding-right: ${this.cellPaddingX};
        }

        ::root.tw-libtable a {
          color: ${this.detailColor};
        }
      `

      if (this.custBorder) {
        style += `
          ::-webkit-scrollbar {
            width: 10px;
          }

          ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 10px;
          }

          ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0,82,217,0.5);
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
          }

          ::-webkit-scrollbar-thumb:hover {
            border-radius: 10px;
            background: rgba(0,82,217,1);
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
          }

          ::root.tw-libtable .xpadding {
            border-radius: ${this.borderRadius};
            background-image: linear-gradient(to left, ${this.customcolors[0]}, ${this.customcolors[1]});
            padding: ${this.borderWidth};
          }
          ::root.tw-libtable .el-table {
            border-radius: ${this.borderRadius};
          }
          ::root.tw-libtable .el-table__header {
            background-image: linear-gradient(to left, ${this.customcolors[0]}, ${this.customcolors[1]});
            background-color: ${this.customcolors[0]}
          }

          ::root.tw-libtable .el-table tr {
            background-color: ${this.trBkgColor};
          }

          ::root.tw-libtable .el-table, ::root.tw-libtable .el-table__expanded-cell {
            background-color: ${this.customcolors[2]}
          }

          ::root.tw-libtable .el-table__fixed-right::before, ::root.tw-libtable .el-table__fixed::before {
            background-color: ${this.trBkgColor};
          }

          ::root.tw-libtable .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, ::root.tw-libtable .el-table__body tr.current-row>td, ::root.tw-libtable .el-table__body tr.hover-row.current-row>td, ::root.tw-libtable .el-table__body tr.hover-row.el-table__row--striped.current-row>td, ::root.tw-libtable .el-table__body tr.hover-row.el-table__row--striped>td, ::root.tw-libtable .el-table__body tr.hover-row>td {
            background-color: ${this.hoverBkgColor};
          }
        `
      }

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    sortChange (sortData) {
      this.$emit('sortChange', sortData)
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
